import Link from "next/link";
import { templates } from "./templates";

export default function TemplateListPage() {
  return (
    <div className="bg-[#f2f2f2] min-h-screen p-10">
      <div className="flex flex-wrap justify-center items-start gap-10">
        {templates.map((template) => {
          const TemplateComponent = template.component;
          return (
            <div key={template.code} className="relative group cursor-pointer">
              <div
                className="shadow-lg overflow-hidden relative"
                style={{ width: 800 * 0.7, height: 1131 * 0.7 }}
              >
                <div
                  style={{
                    transform: "scale(0.7)",
                    transformOrigin: "top left",
                  }}
                >
                  <TemplateComponent resume={template.resume} />
                </div>
              </div>

              <Link href={`/templates/${template.code}`}>
                <button className="bg-blue-500 opacity-0 left-1/2 z-20 -translate-x-1/2 top-1/2 -translate-y-1/2 group-hover:opacity-100 absolute  text-white px-6 py-2 rounded-lg text-lg font-semibold">
                  选择该模板
                </button>
                <div className="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center opacity-0 group-hover:opacity-60 transition-opacity duration-300"></div>
              </Link>
            </div>
          );
        })}
      </div>
    </div>
  );
}
